<template>
	<view>
		<u-no-network></u-no-network>
		
		<view class="test" :style="{width:100+'%',height:stateBarHeight+'px',backgroundColor: `rgba(255,255,255,${limit}%)`,position:'fixed',top:0,'z-index':999}">
		</view>
		<view class="search-container" :style="{height:tabBarHeight+'px',backgroundColor: `rgba(255,255,255,${limit}%)`,top:stateBarHeight+'px'}">
			<my-search :containerHeight="tabBarHeight" :lucency="lucency" :width="width" :color="color" @myClick="gotoSearch"></my-search>
		</view>
		
	<!-- 	<swiper disable-touch class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true">
			<swiper-item v-for="(item,index) in " :key="index">
				<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
					<image :src="item.image_src"></image>
				</navigator>
			</swiper-item>	
		</swiper> -->
		
		<u-swiper border-radius="0" height="500" name="image_src" :list="swiperList"></u-swiper>
		
		<view class="nav-list">
			<view class="nav-item" v-for="(item,index) in navList" :key="index" @click="navClickHandler(item)">
				<image :src="item.image_src" class="nav-img"></image>
			</view>
		</view>
		
		<view class="floor-list">
			<view class="floor-item" v-for="(item,index) in floorList" :key="index">
				<image class="floor-title" :src="item.floor_title.image_src"></image>
				
				<view class="floor-img-box">
					<!-- 左侧 -->
					<navigator :url="item.product_list[0].navigator_url" class="left-img-box">
						<image :style="{width:item.product_list[0].image_width+'rpx'}" :src="item.product_list[0].image_src" mode="widthFix"></image>
					</navigator>
					<!-- 右侧 -->
					<view class="right-img-box">
						<navigator :url="item2.navigator_url" class="right-img-item" v-if="index2 !== 0" :key="index2" v-for="(item2,index2) in item.product_list">
							<image :style="{width:item2.image_width+'rpx'}" mode="widthFix" :src="item2.image_src"></image>
						</navigator>
					</view>
				</view>
				
			</view>
		</view>
		
		<my-list-item url="/subpkg/goods_detail/goods_detail?goods_id=" :leftList="leftList" :rightList="rightList" :state="state" @gotoDetail="gotoDetail"></my-list-item>
		
		<u-back-top :duration="500" style="background-color: red;" :scroll-top="scrollTop"></u-back-top>
		
		<u-tabbar :list="tabbar"></u-tabbar>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import bedgeMix from '../../mixins/tabbar-badge.js'
	import getGoodsMix from '../../mixins/get-goods.js'
	
	
	export default {
		data() {
			return {
				swiperList:[],
				navList:[],
				floorList:[],
				limit:0, //透明度
				color:'#fff',
				width:70,
				oldScrollTop:0,
				lucency:100,
				lucencyOldScrollTop:0,
				scrollTop:0,
			};
		},
		mixins:[getGoodsMix,bedgeMix],
		onLoad() {
			this.getSwiperList()
			this.getNavList()
			this.getFloorList()
			this.$store.commit('adaptive')
		},
		computed:{
			...mapState(['tabbar','stateBarHeight','tabBarHeight','searchHearch','windowWidth']),
		},
		onPageScroll(e){ //获取当前距离屏幕顶部的距离
			
			let scrollTop = e.scrollTop
			this.scrollTop = e.scrollTop
			if(scrollTop >= 100) {
				scrollTop = 100
				this.color = 'black'
			}
			this.limit = scrollTop
			this.lucency -= scrollTop - this.lucencyOldScrollTop
			// if(this.limit >= 90) this.width = 90
			this.width += scrollTop / 5 - this.oldScrollTop
			if(this.limit < 80) {
				this.color = '#fff'
				// this.width = 80
			}
			
			this.oldScrollTop = scrollTop / 5
			this.lucencyOldScrollTop = scrollTop
			
		},
		methods:{
			async getSwiperList(){
				let data = await this.$axios.get('/api/swiperImg')
				if(data.status !== 1) uni.$showMsg()
				else this.swiperList = data.result
			},	
			async getNavList(){
				let {data} = await uni.$http.get('/api/public/v1/home/catitems')
				if(data.meta.status !== 200) uni.$showMsg()
				else this.navList = data.message
			},
			navClickHandler(item){
				
				switch(item.name){
					case '分类':
						uni.switchTab({
							url:'/pages/cate/cate'
						})
					break
				}
			},
			async getFloorList(){
				let {data} = await uni.$http.get('/api/public/v1/home/floordata')
				if(data.meta.status !== 200) return uni.$showMsg()
				data.message.forEach(item=>{
					item.product_list.forEach(item=>{
						item.navigator_url = '/subpkg/goods_list/goods_list?'+item.navigator_url.split('?')[1]
					})
				})
				this.floorList = data.message
			},
			gotoSearch(){
				uni.navigateTo({
					url:'../../subpkg/search/search',
					animationType: 'fade-in',
				})
			}
		}
		
	}
</script>

<style lang="scss">
	page{
		background-color:#e6e6e6
	}

.test{
	width: 100%;
	height: 23px;
	background-color: red;
	position: fixed;
	top: 0;
}
	
	.u-back-top{
	background-color: #FFFFFF !important;
	box-shadow: 0 0 5px gray;
}

.search-container{
	position: fixed;
	top: 10;
	z-index: 9999;
	width: 100%;
}

	.swiper{
		height: 400rpx;
	
		.swiper-item,
			image{
				width: 100%;
				height: 100%;
			}
	}
	
	.nav-list{
		display: flex;
		justify-content: space-around;
		margin: 15px 	0;
		
		.nav-img{
			width: 128rpx;
			height: 140rpx;
		}
	}
	
	.floor-title{
		width: 100%;
		height: 60rpx;
	}
	
	.floor-list{
		
	
		
		.floor-img-box{
			display: flex;
			
			.left-img-box{
				padding-left: 10rpx;
			}
			
			.right-img-box{
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
			}
		}
	
	}
	
</style>
